<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            background-color: #ccc;
            height: 400px;
        }
        ul li{
            float: left;
            width: 200px;
            height: 300px;
            list-style: none;
            margin-right: 50px;
        }
        li img{
            width: 100%;
        }
        .p1{
            color: red;
        }
    </style>
</head>
<body>
    <ul id="box"></ul>
    <script>
        var goodlist = [
            { id: 1, url: './images/1.jpg', name: '乐淘淘cc', price: 78.00, list: "女装真丝连衣裙" },
            { id: 2, url: './images/2.jpg', name: '江米天猫', price: 228.00, list: "sp同款小白裙" },
            { id: 3, url: './images/3.jpg', name: '绣娘旗舰店', price: 1254.40, list: "绣娘新装仙气小裙" },
            { id: 4, url: './images/4.jpg', name: '家有n多宝贝', price: 169.00, list: "绒被清凉小婵" },
            { id: 5, url: './images/5.jpg', name: '音儿官方旗舰店', price: 1488.00, list: "2020夏季新款小菊图" }
        ]

        goodlist.forEach(function(item,index){
            box.innerHTML+=`
            <li class="goods1" idx=${item.id}>
            <img src=${item.url}>
            <p class="p1">￥${item.price}</p>
            <p>${item.list}</p>
            <p>${item.name}</p>
        </li>
            
            
            `
        })

        var oli=document.getElementsByClassName("goods1")
        console.log(oli)

        for(var i=0; i<oli.length;i++){
            oli[i].onclick=function(){
                open('详情.html?id=' + this.getAttribute('idx'));
            }
        }

    </script>
</body>
</html>